<template>
  <div class="s_radio_box">
    <span
      v-for="(el, index) in options"
      class="s_radio_option"
      :class="{ active: currentType == el.value }"
      @click="currentType = el.value"
      >{{ el.title }}</span
    >
  </div>
</template>

<script>
export default {
  components: {},
  props: {
    defaultValue: {
      type: Number,
      default: -1,
    },
    options: {
      type: Array,
      default: () => {
        return [
          {
            title: '全部',
            value: -1,
          },
          {
            title: '显示',
            value: 1,
          },
          {
            title: '不显示',
            value: 0,
          },
        ]
      },
    },
  },
  data() {
    return {
      currentType: null,
    }
  },
  computed: {},
  watch: {
    defaultValue: {
      handler(val) {
        this.currentType = val
      },
      immediate: true,
    },
    currentType(val) {
      this.$emit('onChange', val)
    },
  },
  created() {},
  mounted() {},
  updated() {},
  methods: {
    onChange() {},
  },
}
</script>

<style lang="less" scoped>
.s_radio_box {
  display: inline-block;
  height: 32px;
  line-height: 32px;
  .s_radio_option {
    margin: 0 32px 0 0;
    cursor: pointer;
    padding: 7px 15px;
    &:hover {
      color: rgb(24, 144, 255);
    }
  }
}
.active {
  background: #1890ff;
  color: #fff;
  border-radius: 2px;
  &:hover {
    color: #fff !important;
  }
}
</style>